﻿@model Project5.Models.QuestionModel

@{
    ViewBag.Title = "Edit";
}

<script src="@Url.Content("~/Scripts/editsurvey.js")" type="text/javascript"></script>

<style type="text/css">
    /* TODO: This style is temporarily located here! It will need to be moved either to Site.css or add via javascript */
    .accordianHover:hover { background-color: rgb(245, 245, 245);}
    .spacer { width:4px; height:auto; display:inline-block; } /* yes, this is a last minute hack which should be removed */
</style>

<div class="page-header"><h1>Survey Name: <input class="input-large" type="text" id="surveyNameField" value="@ViewBag.SurveyName" onPaste="return false" onkeyup="delayFunction(setNewSurveyName(),500)"></h1>
<!--<span class="help-inline">Type to rename the survey...</span>-->

<small>By: @ViewBag.SurveyOriginator</small></div>

@Html.Hidden("masterSurveyID", (int)ViewBag.Id)

<button class="btn btn-small btn-info" type="button" id="monetize"><span>Click to monetize </span><i class="icon-gift icon-white" id="gift_icon"></i></button>

  <div class="accordion" id="surveyQuestionListAccordion">
      <div id="questionAccordion" class="accordion-group">
            
        @if (ViewBag.Questions != null)
        {   
            int count = 1;
            foreach (var question in ViewBag.Questions)
            {
                    <div class="accordion-heading" name="updateQuestion@(count)" >
                        <a class="accordion-toggle accordianHover" data-toggle="collapse" data-parent="#surveyQuestionListAccordion" href="#updateQuestion@(count)">
                        @{  string questionHeader = question.Question;
                            int maxHeaderLength = 50;
                            if(question.Question.Length > maxHeaderLength){
                                questionHeader = question.Question.Substring(0, maxHeaderLength) + "...";
                            }
                        }
                        @questionHeader
                        </a>
                    </div>
                    <div id="updateQuestion@(count)" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <form>
                                <fieldset>
                                    @Html.Hidden("SurveyId", (int)question.SurveyId, new { @class = "surveyId" })
                                    @Html.Hidden("QuestionId", (int)question.Id, new { @class = "questionId" })
                                    <div class="editor-field">
                                        <input type="text" class="questionText" name="questionText" value="@question.Question" placeholder="Enter question text here..." />
                                    </div>
                                    <p><b>Select Question Type</b></p>
                                    <div class="editor-field">
                                        @{
                                            // set the attributes for the radio buttons and check the one currently selected for this question
                                            IDictionary<string, object> type1Attributes = new Dictionary<string, object>();
                                            type1Attributes.Add("class", "radio questionType");
                                            type1Attributes.Add("name", "questionType");
                                            type1Attributes.Add("value", 1);
                                        
                                            IDictionary<string, object> type2Attributes = new Dictionary<string, object>();
                                            type2Attributes.Add("class", "radio questionType");
                                            type2Attributes.Add("name", "questionType");
                                            type2Attributes.Add("value", 2);
                                        
                                            IDictionary<string, object> type3Attributes = new Dictionary<string, object>();
                                            type3Attributes.Add("class", "radio questionType");
                                            type3Attributes.Add("name", "questionType");
                                            type3Attributes.Add("value", 3);
                                        
                                            if(question.Type == 1){
                                                type1Attributes.Add("checked", "true");   
                                            } else if(question.Type == 2){
                                                type2Attributes.Add("checked", "true");
                                            } else if(question.Type == 3){
                                                type3Attributes.Add("checked", "true");
                                            }
                                        }
                                        <label>
                                                @Html.RadioButtonFor(model => model.Type, 1, type1Attributes)  
                                            Text Response
                                        </label>
                                        <label>
                                            @Html.RadioButtonFor(model => model.Type, 2, type2Attributes)  
                                            Multiple Choice
                                        </label>
                                        <label>
                                            @Html.RadioButtonFor(model => model.Type, 3, type3Attributes)  
                                            True/False
                                        </label>
                                    </div>
                                    <div class="choices update">
                                        <p><b>Add Multiple Choice Options</b></p>
                                        <div class="choiceList">
                                            <!-- dynamic list of choices will go here as the user adds them -->
                                            @{
                                                if(question.Type == 2 && question.Choices != null){
                                                    foreach(var choice in question.Choices){
                                                        <div class="input-append choice">
                                                                @Html.Hidden("choiceId", (int)choice.Id, new { @class = "choiceId" })
                                                                <input class="span3 choiceText" type="text" name="choiceText" value="@choice.Choice" placeholder="Enter choice text here..." />
                                                                <a href="#" class="btn btn-danger deleteButton" title="Remove option"><i class="icon-white icon-remove"></i></a>
                                                        </div>
                                                    }
                                                }
                                                    
                                              }
                                        </div>
                                        <p><a class="addChoiceOption" href="#">Add Next Choice Option</a></p>
                                    </div>
                                    <p>
                                        <button class="btn btn-primary updateQuestionButton" type="button">Update</button>
                                        <button class="btn btn-danger deleteQuestionButton" type="button">Delete</button>
                                    </p>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                count++;
            }
        }
            <div class="accordion-heading">
                <a class="accordion-toggle accordianHover" data-toggle="collapse" data-parent="#surveyQuestionListAccordion" href="#createNewQuestion">
                Add New Question
                </a>
            </div>
            <div id="createNewQuestion" class="accordion-body collapse question">
                    <div class="accordion-inner">
                        <fieldset>
                            <input type="hidden" class="surveyId" id="questionParentId" value="@ViewBag.Id" />
                            <input type="hidden" class="questionId" value="0" />
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.Question, new { @class="questionText", id = "questionField", placeholder = "Enter question text here..." })
                            </div>
                            <p><b>Select Question Type</b></p>
                            <div class="editor-field">
                                <label>
                                    @Html.RadioButtonFor(model => model.Type, 1, new { @class = "radio questionType", id = "questionTypeField1", value = "text", @checked = "true" }) 
                                    Text Response
                                </label>
                                <label>
                                    @Html.RadioButtonFor(model => model.Type, 2, new { @class = "radio questionType", id = "questionTypeField2", name = "mutipleChoice" })
                                    Multiple Choice
                                </label>
                                <label>
                                        @Html.RadioButtonFor(model => model.Type, 3, new { @class = "radio questionType", id = "questionTypeField3", name = "trueFalse" })
                                        True/False
                                </label>
                            </div>
                                
                            <div class="choices">
                                <p><b>Add Multiple Choice Options</b></p>
                                <div class="choiceList">
                                    <!-- dynamic list of choices will go here as the user adds them -->
                                </div>
                                <p><a class="addChoiceOption" href="#">Add Next Choice Option</a></p>
                            </div>
                            <p>
                                <button id="saveQuestionButton" class="btn btn-primary" type="button">Save</button>
                            </p>
                        </fieldset>
                    </div>
            </div>
      </div>
 </div>
 
<button class="btn btn-small btn-success" type="button" id="doneEditingButton">Done Editing</button>

<div class="modal fade hide in" id="renameSurveyModal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            New Survey Name</h3>
    </div>
    <div class="modal-body">
    @using (Html.BeginForm())
    {
        <fieldset>
             <div class="editor-label">
               <label>Survey Name</label>
               @Html.Hidden("renameId", (int)ViewBag.Id)
            </div>
            <div class="editor-field">
                <input type="text" id="newSurveyNameField" placeholder="Enter survey name here..."/>
            </div>
        </fieldset>
    }
    </div>
    <div class="modal-footer">
        <button id="renameSurveyDialogButton" class="btn btn-success" data-dismiss="modal">Rename</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    </div>
</div>
<script type="text/javascript">setQuestionCount()</script>
 @if (ViewBag.Monetized)
 {
    <script type="text/javascript">        setMonetized()</script>
 }
